<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户交互</el-breadcrumb-item>
      <el-breadcrumb-item>未解决反馈</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>反馈列表</span>
      </div>
      <div>
        <el-radio-group v-model="selectStatus">
          <el-radio-button label="待解决反馈" @click.native="toUnresolved" ></el-radio-button>
          <el-radio-button label="已解决反馈" @click.native="toResolved"></el-radio-button>
        </el-radio-group>
      </div>
      <!-- 搜索区域 -->
      <el-input placeholder="请输入内容"
                v-model="queryInfo.searchContent"
                clearable @clear="getUnresolvedFeedback"
                style="margin-top: 20px">
        <el-select v-model="queryInfo.select" slot="prepend" placeholder="请选择">
          <el-option label="职工工号" value="workNumber"></el-option>
          <el-option label="反馈内容" value="text"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getUnresolvedFeedback"></el-button>
      </el-input>
      <!-- 用户列表区域-->
      <el-table
        :data="unresolvedFeedbackList" border stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="workNumber" label="职工工号"></el-table-column>
        <el-table-column prop="type" label="反馈类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0">体验反馈</el-tag>
            <el-tag type="success" v-else>审核结果反馈</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === false">待处理</span>
            <span v-else>已处理</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="text" label="内容" width="300px"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--查看详情按钮-->
            <el-tooltip class="item" effect="dark" content="查看反馈" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="showCheckFeedbackDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <!--处理反馈按钮-->
            <el-tooltip class="item" effect="dark" content="处理反馈" placement="top" :enterable="false">
              <el-button type="success" icon="el-icon-check" size="mini" @click="showSolveFeedbackDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <!--删除反馈按钮-->
            <el-tooltip class="item" effect="dark" content="删除反馈" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeleteFeedbackDialog(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :current-page="queryInfo.nowpage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 查看反馈的对话框 -->
    <el-dialog title="反馈详情" :visible.sync="checkFeedbackDialogVisible" width="40%">
      <!-- 内容主体区域 -->
      <el-form :model="feedbackInfoForm" label-width="100px" style="margin-top: 30px">
        <el-form-item label="职工工号" prop="workNumber">
          <el-input class="form-input" v-model="feedbackInfoForm.workNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="反馈类型" prop="type">
          <el-input v-if="feedbackInfoForm.type === 0" class="form-input" autocomplete="off" disabled value="体验反馈"></el-input>
          <el-input v-else class="form-input" autocomplete="off" disabled value="审核结果反馈"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input class="form-input" v-if="feedbackInfoForm.state === false" autocomplete="off" disabled value="未处理"></el-input>
          <el-input class="form-input" v-else autocomplete="off" disabled value="已处理"></el-input>
        </el-form-item>
        <el-form-item label="反馈日期" prop="date">
          <el-input class="form-input" type="date" v-model="feedbackInfoForm.date" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="反馈内容" prop="text">
          <el-input type="textarea"
                    class="form-input"
                    v-model="feedbackInfoForm.text"
                    :autosize="{ minRows: 4, maxRows: 10}"
                    disabled>
          </el-input>
        </el-form-item>
        <el-form-item v-if="feedbackInfoForm.picture!==''" label="图片" prop="picture">
          <el-image
            style="width: 300px; height: 200px ;display: block"
            :src="feedbackInfoForm.picture"
            :preview-src-list="srcList">
          </el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 解决反馈的对话框 -->
    <el-dialog title="处理反馈提示" :visible.sync="solveFeedbackDialogVisible" width="30%" >
      <!-- 内容主体区域 -->
      <span>确定将反馈状态置为已处理吗?</span>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="solveFeedbackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="solveFeedback">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除反馈的对话框 -->
    <el-dialog title="删除反馈提示" :visible.sync="deleteFeedbackDialogVisible" width="30%" >
      <!-- 内容主体区域 -->
      <span>确定删除该反馈吗?</span>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteFeedbackDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteFeedback">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectStatus: '待解决反馈',
      queryInfo: {
        // 当前页数
        nowPage: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
        // 选择种类
        select: '',
        // 搜索内容
        searchContent: ''
      },
      // 数据总数
      total: 0,
      // 未解决的反馈列表
      unresolvedFeedbackList: [],
      // 控制查看反馈对话框的显示与隐藏
      checkFeedbackDialogVisible: false,
      // 控制解决反馈对话框的显示与隐藏
      solveFeedbackDialogVisible: false,
      // 控制删除反馈对话框的显示与隐藏
      deleteFeedbackDialogVisible: false,
      // 反馈详情表单
      feedbackInfoForm:[],
      // 图片预览功能
      srcList: [],
      // 操作的对象id
      idInfo: {
        id: 1
      }
    }
  },

  created () {
    this.getUnresolvedFeedback()
  },
  methods: {

    /**
     * 跳转到未解决反馈页面
     */
    toUnresolved(){
      this.$router.push({ path: '/unresolvedFeedback' }).catch(err => {
        //console.log('输出报错',err)
      })
    },

    /**
     * 跳转到已解决反馈页面
     */
    toResolved(){
      this.$router.push({ path: '/resolvedFeedback' }).catch(err => {
        //console.log('输出报错',err)
      })
    },

    /**
     * 获取未处理反馈列表
     */
    async getUnresolvedFeedback() {
      let res = await this.$http.get('unresolvedFeedback',{ params: this.queryInfo})
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有获取反馈列表的权限!')
        }
        return this.$message.error('获取反馈列表失败!')
      }
      //console.log(res)
      this.total = res.data.total
      this.unresolvedFeedbackList = res.data.feedback
    },

    /**
     * 监听分页尺寸改变
     * @param newSize:新的分页尺寸
     */
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getUnresolvedFeedback()
    },

    /**
     * 监听当前页码变化
     * @param nowPage:当前页码
     */
    handleCurrentChange (nowPage) {
      this.queryInfo.nowpage = nowPage
      this.getUnresolvedFeedback()
    },

    /**
     * 设置票据图片的url
     */
    setImageUrl:function(pictureUrl){
      // 0. 设置请求参数
      const method = 'GET'
      const Host = 'tickets.bj.bcebos.com';
      const accessKey = '79c9cba51f0a4df1a6281aab51cdad3e';
      const secretKey = 'b21aa6a38adf439fa2dd26c6033e1311';
      let url='/'+pictureUrl; // 要有 "/"
      const params = {};
      const headers = {
        'Host': Host
      };
      // 1. 生成认证字符串signature
      const Auth = require('@baiducloud/sdk').Auth;
      const auth = new Auth(accessKey, secretKey);
      let signature = auth.generateAuthorization(method, url, params, headers);

      // 2. API方式 访问资源
      let picture = 'http://' + Host + url + '?authorization=' + signature;
      return picture
    },

    /**
     * 展示查看反馈的对话框
     * @param id 反馈ID
     */
    async showCheckFeedbackDialog(id){
      this.idInfo.id=id
      let res=await this.$http.get('feedback', { params: this.idInfo })
      //console.log(res)
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有查看反馈详情的权限!')
        }
        return this.$message.error('获取反馈详情失败!')
      }
      this.feedbackInfoForm=res.data
      if(this.feedbackInfoForm.picture!==''){
        let temp=this.feedbackInfoForm.picture
        this.feedbackInfoForm.picture = this.setImageUrl(temp)
        this.srcList.push(this.feedbackInfoForm.picture)
        console.log('aaa')
      }
      this.checkFeedbackDialogVisible = true
    },

    /**
     * 展示解决反馈的对话框
     */
    showSolveFeedbackDialog (id) {
      this.idInfo.id = id
      this.solveFeedbackDialogVisible = true
    },

    /**
     * 解决反馈
     */
    async solveFeedback() {
      let res = await this.$http.get('reset-feedback',{params: this.idInfo})
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有重置反馈状态的权限!')
        }
        return this.$message.error('重置反馈状态失败!')
      } else {
        this.$message.success('重置成功')
      }
      this.getUnresolvedFeedback()
      this.solveFeedbackDialogVisible = false
    },

    /**
     * 展示删除反馈的对话框
     */
    showDeleteFeedbackDialog (id) {
      this.idInfo.id = id
      this.deleteFeedbackDialogVisible = true
    },

    /**
     * 删除反馈
     */
    async deleteFeedback() {
      let res = await this.$http.delete('feedback',{params: this.idInfo})
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有删除反馈的权限!')
        }
        return this.$message.error('删除失败!')
      } else {
        this.$message.success('删除成功')
      }
      this.getUnresolvedFeedback()
      this.deleteFeedbackDialogVisible = false
    }


  }
}
</script>

<style lang="less" scoped>
  .el-input {
    width: 500px;
  }
  .el-select {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-table {
    margin-top: 15px;
    font-size: 12px;
  }
  .el-pagination {
    margin-top: 15px;
  }
  .form-input {
    width: 80%;
  }
</style>
